<template>
  <div class="link flex">
    <table border="1" class="tabledata">
      <tr>
        <td colspan="22" class="bg" style="font-size: 16px; font-weight: bold">焦炉生产及工艺控制情况</td>
      </tr>
      <tr>
        <td colspan="9"></td>
        <td colspan="9">工艺控制情况</td>
        <td colspan="3" rowspan="9">
          <textarea cols="30" rows="12" v-model="content" v-if="!date.isup"></textarea>
          <div v-else style="white-space: pre-line;text-align: left;width: 200px;">{{content}}</div>
        </td>
      </tr>
      <tr>
        <td rowspan="3"><div style="width: 60px;">焦炉炉号</div></td>
        <td rowspan="2">计划炉数</td>
        <td rowspan="2">实际炉数</td>
        <td rowspan="2">月累计出炉数 </td>
        <td rowspan="2">日产全焦</td>
        <td rowspan="2">月累计全焦</td>
        <td rowspan="2">单炉干基装煤量</td>
        <td rowspan="2">日累计装煤量</td>
        <td rowspan="2">月累计干基装煤量</td>
        <td rowspan="3"><div style="width: 60px;">焦炉炉号</div></td>
        <td colspan="2">标准温度</td>
        <td rowspan="2">循环氨水压力</td>
        <td rowspan="2">集气管压力</td>
        <td rowspan="2">集气管温度</td>
        <td rowspan="2">回炉煤气量</td>
        <td rowspan="2">回炉煤气总量</td>
        <td rowspan="2">热风炉煤气总量</td>
      </tr>
      <tr>
        <td>机侧</td>
        <td>焦侧</td>
      </tr>
      <tr>
        <td colspan="3">(炉)</td>
        <td colspan="5">(t)</td>
        <td>(℃)</td>
        <td>(℃)</td>
        <td>(Mpa)</td>
        <td>(pa)</td>
        <td>(℃)</td>
        <td colspan="2">万m³</td>
        <td>万m³</td>
      </tr>
      <tr v-for="item in 4">
        <td>{{ item }}号焦炉</td>
        <td><input type="number" class="dinput" v-model="inputs[item - 1]['jhls' + item]" v-if="!date.isup"/><span v-else>{{inputs[item - 1]['jhls' + item]}}</span></td>
        <td><input type="number" class="dinput" v-model="inputs[item - 1]['sjls' + item]" v-if="!date.isup"/><span v-else>{{inputs[item - 1]['sjls' + item]}}</span></td>
        <td><input type="number" class="dinput" v-model="inputs[item - 1]['yljls' + item]" v-if="!date.isup"/><span v-else>{{inputs[item - 1]['yljls' + item]}}</span></td>
        <td><input type="number" class="dinput" v-model="inputs[item - 1]['rcqj' + item]" v-if="!date.isup"/><span v-else>{{inputs[item - 1]['rcqj' + item]}}</span></td>
        <td><input type="number" class="dinput" v-model="inputs[item - 1]['yljqj' + item]" v-if="!date.isup"/><span v-else>{{inputs[item - 1]['yljqj' + item]}}</span></td>
        <td><input type="number" class="dinput" v-model="inputs[item - 1]['dlzml' + item]" v-if="!date.isup"/><span v-else>{{inputs[item - 1]['dlzml' + item]}}</span></td>
        <td><input type="number" class="dinput" v-model="inputs[item - 1]['rljzml' + item]" v-if="!date.isup"/><span v-else>{{inputs[item - 1]['rljzml' + item]}}</span></td>
        <td><input type="number" class="dinput" v-model="inputs[item - 1]['yljzml' + item]" v-if="!date.isup"/><span v-else>{{inputs[item - 1]['yljzml' + item]}}</span></td>
        <td>{{ item }}#焦炉</td>
        <td><input type="number" class="dinput" v-model="inputs[item - 1]['jice' + item]" v-if="!date.isup"/><span v-else>{{inputs[item - 1]['jice' + item]}}</span></td>
        <td><input type="number" class="dinput" v-model="inputs[item - 1]['jiaoce' + item]" v-if="!date.isup"/><span v-else>{{inputs[item - 1]['jiaoce' + item]}}</span></td>
        <td><input type="number" class="dinput" v-model="inputs[item - 1]['xhasyl' + item]" v-if="!date.isup"/><span v-else>{{inputs[item - 1]['xhasyl' + item]}}</span></td>
        <td><input type="number" class="dinput" v-model="inputs[item - 1]['jqgyl' + item]" v-if="!date.isup"/><span v-else>{{inputs[item - 1]['jqgyl' + item]}}</span></td>
        <td><input type="number" class="dinput" v-model="inputs[item - 1]['jqgwd' + item]" v-if="!date.isup"/><span v-else>{{inputs[item - 1]['jqgwd' + item]}}</span></td>
        <td><input type="number" class="dinput" v-model="inputs[item - 1]['hlmql' + item]" v-if="!date.isup"/><span v-else>{{inputs[item - 1]['hlmql' + item]}}</span></td>
        <td><input type="number" class="dinput" v-model="inputs[item - 1]['hlmqzl' + item]" v-if="!date.isup"/><span v-else>{{inputs[item - 1]['hlmqzl' + item]}}</span></td>
        
        <td v-if="item==1">1#</td>
        <td v-else-if="item==3">2#</td>
        <td v-else><input type="number" class="dinput" v-model="inputs[item - 1]['rflmqzl' + item]" v-if="!date.isup"/><span v-else>{{inputs[item - 1]['rflmqzl' + item]}}</span></td>
      </tr>
      <tr>
        <td>合计</td>
        <td>{{jhlstotal}}</td>
        <td>{{sjlstotal}}</td>
        <td>{{yljlstotal}}</td>
        <td>{{rcqjtotal}}</td>
        <td>{{yljqjtotal}}</td>
        <td>{{dlzmltotal}}</td>
        <td>{{rljzmltotal}}</td>
        <td>{{yljzmltotal}}</td>
        <td>—</td>
        <td>—</td>
        <td>—</td>
        <td>—</td>
        <td>—</td>
        <td>—</td>
        <td>{{hlmqltotal}}</td>
        <td>{{hlmqzltotal}}</td>
        <td>{{rflmqzltotal}}</td>
      </tr>
    </table>
  </div>
</template>

<script lang="ts" setup name="jlscjgykzqk">
// 焦炉生产及工艺控制情况
import cache from "@/utils/cache";
import { getJlscjgykzqk, jlscjgykzqkSave, jlscjgykzqkSubmit } from "@/api/report";
// 循环生成绑定数据  一共4行
const arr = [];
for (let i = 1; i <= 4; i++) {
  arr.push({
    ["jhls" + i]: "",
    ["sjls" + i]: "",
    ["yljls" + i]: "",
    ["rcqj" + i]: "",
    ["yljqj" + i]: "",
    ["dlzml" + i]: "",
    ["rljzml" + i]: "",
    ["yljzml" + i]: "",
    ["jice" + i]: "",
    ["jiaoce" + i]: "",
    ["xhasyl" + i]: "",
    ["jqgyl" + i]: "",
    ["jqgwd" + i]: "",
    ["hlmql" + i]: "",
    ["hlmqzl" + i]: "",
    ["rflmqzl" + i]: "",
  });
}
// 整表 数据绑定
const inputs = ref(arr);
// 记事
const content = ref('记事：');

// 合计
const jhlstotal = ref(0);
const sjlstotal = ref(0);
const yljlstotal = ref(0);
const rcqjtotal = ref(0);
const yljqjtotal = ref(0);
const dlzmltotal = ref(0);
const rljzmltotal = ref(0);
const yljzmltotal = ref(0);
const hlmqltotal = ref(0);
const hlmqzltotal = ref(0);
const rflmqzltotal = ref(0);

// 深层监听数据修改  根据数据变化 从新计算合计
watch(inputs, async (n) => {
  let i = 1;
  let a = 0, b = 0,c = 0,d = 0,e = 0,f = 0,g = 0,h = 0,j = 0,k = 0,m = 0;
  n.forEach((item)=>{
    a += Number(item['jhls'+i])
    b += Number(item['sjls'+i])
    c += Number(item['yljls'+i])
    d += Number(item['rcqj'+i])
    e += Number(item['yljqj'+i])
    f += Number(item['dlzml'+i])
    g += Number(item['rljzml'+i])
    h += Number(item['yljzml'+i])
    j += Number(item['hlmql'+i])
    k += Number(item['hlmqzl'+i])
    m += Number(item['rflmqzl'+i])
    
    i++
  });
  
  jhlstotal.value = a.toFixed(2);
  sjlstotal.value = b.toFixed(2);
  yljlstotal.value = c.toFixed(2);
  rcqjtotal.value = d.toFixed(2);
  yljqjtotal.value = e.toFixed(2);
  dlzmltotal.value = (f/n.length).toFixed(2);
  rljzmltotal.value = g.toFixed(2);
  yljzmltotal.value = h.toFixed(2);
  hlmqltotal.value = j.toFixed(2);
  hlmqzltotal.value = k.toFixed(2);
  rflmqzltotal.value = m.toFixed(2);
},{ deep: true })

const save = async () => {
  let userInfo = cache.get('userInfo')
  let res = await jlscjgykzqkSave({
    inputs:inputs.value,
    content: content.value,
    aid: userInfo.id,
    aname: userInfo.name,
    date:date.date,
  })
}
const uuuu = ref(cache.get('role_name'))
// 提交方法，调用接口
const submit = async () => {
  await jlscjgykzqkSubmit({
    label:uuuu.value,
    date:date.date,
  })
}

onMounted(() => {
  getData()
})

const getData = async () => {
  getJlscjgykzqk(date).then((res)=>{
    if(res.length>0){
      let newarr = []
      res.forEach((item,i)=>{
        let obj = {
          ["jhls" +(i+1)]: item.jhls,
          ["sjls" +(i+1)]: item.sjls,
          ["yljls" +(i+1)]: item.yljls,
          ["rcqj" +(i+1)]: item.rcqj,
          ["yljqj" +(i+1)]: item.yljqj,
          ["dlzml" +(i+1)]: item.dlzml,
          ["rljzml" +(i+1)]: item.rljzml,
          ["yljzml" +(i+1)]: item.yljzml,
          ["jice" +(i+1)]: item.jice,
          ["jiaoce" +(i+1)]: item.jiaoce,
          ["xhasyl" +(i+1)]: item.xhasyl,
          ["jqgyl" +(i+1)]: item.jqgyl,
          ["jqgwd" +(i+1)]: item.jqgwd,
          ["hlmql" +(i+1)]: item.hlmql,
          ["hlmqzl" +(i+1)]: item.hlmqzl,
          ["rflmqzl" +(i+1)]: item.rflmqzl,
        }
        newarr.push(obj)
      })
      content.value = res[0].content
      inputs.value = newarr
    }else{
      inputs.value = arr
    }
  })
}
const date = defineProps(['date','isup'])
watch(date, async (n) => {
  getData()
})

defineExpose({
  save,
  submit
})



</script>

<style lang="scss" scoped>
.tabledata {
  width: 100%;
  border: 1px solid #aaa;
  td {
    text-align: center;
    border: 1px solid #aaa;
    padding: 3px;
  }
  .bg{
    background: #ccc;
  }
  .dinput{
    text-align: center;
    border-radius: 5px;
    width: 80px;
    border: 1px solid #ccc;
  }
}
</style>
